<!-- 金牌list -->
<template>
	<div class="lawer-content ">
		<div class="lawer-box" v-for="(item, index) in lawerArr" :key="index" @click="routerToDetail(item)">
			<p class="lawer-tag" v-if="item.gold">
				<img src="../assets/images/jp.png" style="width:32px;height:22px;" />
			</p>
			<div class="inner-box">
				<div class="lawerL">
					<p class="lawer-img">
						<img v-if="item.face" :src="$img + item.face" />
						<img v-else src="../assets/images/logo.png" />
					</p>
				</div>
				<div class="lawerC">
					<div class="lawerName">
						{{ item.name }}
					</div>
					<div class="lawerTitle">
						{{ item.region_name }}
					</div>
					<div class="wordBox">
						<span v-for="(item, index) in JSON.parse(item.certificate_type)" :key="index">{{
              item.name
            }}</span>
					</div>
				</div>
				<div class="lawerR flex-1">
					{{ item.law_firm_name }}
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "DtLawer",
		props: {
			lawerArr: {
				type: Array,
				default: () => {
					return [];
				}
			},
			wordArr: {
				type: Array,
				default: () => {
					return [];
				}
			}
		},
		data() {
			return {
				obj: {
					title: "金牌",
					img: "/assets/images/1.png",
					cName: "张晓菲律师/5年经验",
					company: "武汉市你来我就来律师事务所",
					price: 22
				},
				currIndex: '',
			};
		},
		methods: {
			routerToDetail(item) {	
				console.log(item);
				this.$router.push('/lawerDetail?id=' + item.user_id)
			}
		}
	};
</script>
<style lang="less" scoped>
	.lawer-content {
		border-radius: 8px;
		padding: 0 16px;
		border-radius: 8px;

		.lawer-box {
			// height: 112px;
			padding-top: 20px;
			margin-bottom: 10px;
			background: #fff;
			border: 1px solid #FFF9F9FA;

			.inner-box {
				display: flex;
				justify-content: flex-start;
				padding-bottom: 20px;
			}

			.lawerL {
				align-self: center;

				.lawer-tag {
					// width: 32px;
					// height: 22px;
					// border-radius: 2px;
					// background: #f1cc9c;
					// border-bottom-left-radius: 8px;
					// border-bottom-right-radius: 8px;
					position: relative;

					>span {
						font-size: 12px;
						color: #5b5041;
						left: 4px;
						top: 2px;
						position: absolute;
						margin-top: 3px;
					}
				}

				.lawer-img {
					padding-left: 16px;

					>img {
						width: 72px;
						height: 72px;
						border-radius: 36px;
						object-fit: cover;
					}
				}
			}

			.lawerC {
				// align-self: center;
				word-break: keep-all;
				vertical-align: top;
				padding-left: 16px;
				flex: 1;

				.lawerName {
					font-size: 16px;
					font-weight: bold;
				}

				.lawerTitle {
					font-size: 12px;
					padding-top: 6px;
				}

				.wordBox {
					padding-top: 8px;
					display: flex;
					flex-wrap: wrap;
					justify-content: start;

					>span {
						padding: 0.01rem 0.02rem;
						background: #f7f7f7;
						font-size: 10px;
						color: #3e86ff;
						margin-right: 3%;
						text-align: center;
						margin-top: 5px;
					}

					>span:nth-of-type(3n) {
						margin-right: 0;
					}
				}
			}

			.lawerR {
				margin-right: 10px;

				.price {
					color: #f33535;
				}
			}
		}

		.action {
			border-color: #3e86ff;
		}
	}
</style>
